<template>
<div class="footer">
  <content-container>
    <div class="flex" style="align-items: stretch;">
      <div>
        <div>
          <img class="logo2" src="/logo2.jpg" alt="logo"/>
        </div>
        <div class="contacts">
          <h3 class="title">商务合作</h3>
          <p class="contact-item"><i class="el-icon-phone"></i>400-888-88888</p>
          <p class="contact-item"><i class="el-icon-document"></i>hezuo@shidao.cn</p>
          <p class="contact-item"><i class="el-icon-location"></i>上海市徐汇区石龙路329号越界智慧谷1楼112-113室</p>
        </div>
        <p class="copyright">Copyright@2020 上海师道知识管理集团有限公司 all fights reserved. <a href="https://beian.miit.gov.cn/" style="margin-left: 10px;">沪ICP备19019752号-2</a></p>
      </div>
      <div class="flex-1"></div>
      <div class="">
        <div class="flex navs">
          <div class="flex-1"></div>
          <nuxt-link class="nav" to="/" style="padding-left: 0;">首页</nuxt-link>
          <nuxt-link class="nav" to="/about">关于我们</nuxt-link>
          <nuxt-link class="nav" to="/product">产品体系</nuxt-link>
          <!--<nuxt-link class="nav" to="/app">众智共享</nuxt-link>-->
          <nuxt-link class="nav" to="/contact">联系我们</nuxt-link>
        </div>
        <div class="flex apps">
          <div class="flex-1"></div>
          <div class="qr">
            <img src="/wx-shidao.jpg" />
            <p>师道知识公众号</p>
          </div>
          <div class="qr">
            <img src="/wx-app.png" />
            <p>众智共享APP下载</p>
          </div>
        </div>
      </div>
    </div>
  </content-container>
</div>
</template>

<script>
import ContentContainer from './ContentContainer'
export default {
  name: 'PageFooter',
  components: {ContentContainer},
  data() {
    return {}
  },
  created() {

  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
  .footer{
    background-color: $color-gray;
    color: #fff;
    padding: 30px 0;

    .contacts{
      margin-top:30px;

      .contact-item{
        margin-top:10px;
      }
      i{
        margin-right:5px;
      }
    }

    .navs{
      line-height: 50px;
      text-align: right;
    }
    .nav{
      border-bottom: 1px solid #fff;
      padding-left: 50px;
    }

    a {
      color:#fff;
      text-decoration: none;
    }
    .logo2{
      height:50px;
    }
    .apps{
      margin-top:30px;
        .qr{
          margin-left: 30px;
        }
        img{
          width:80px;
          display: block;
          margin:auto;
        }
        p{
          margin-top:8px;
          text-align: center;
        }
    }

  }
  .copyright{
    font-size: 14px;
    margin-top:50px;
  }

</style>
